<!--
 * @Author: 王坤
 * @Description: LcDatePicker
-->
<template>
  <div class="lc-date-picker">
    <el-date-picker
      v-model="datePickerValue"
      v-bind="configs"
      :clear-icon="CircleCloseFilled"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue';
import { CircleCloseFilled } from '@element-plus/icons-vue';

defineProps({
  configs: {
    type: Object,
    default: () => {}
  }
});
const datePickerValue = defineModel();
const shortcuts = [{ text: '今天', value: new Date() }];
let { proxy } = getCurrentInstance();
onMounted(() => {
  adjustIconPosition();
  addEventListener();
});
const addEventListener = () => {
  const el = proxy.$el;
  el.addEventListener('mouseenter', (event) => {
    handleEnter(event);
  });
  el.addEventListener('mouseleave', (event) => {
    handleLeave(event);
  });
};
const deletePrefixIcon = (currentDom) => {
  for (let i = 0; i < currentDom.children?.length; i++) {
    const child = currentDom.children[i];
    if (child.getAttribute('class') === 'el-input__prefix') {
      currentDom.removeChild(child);
      return {
        parentDom: currentDom,
        iconDom: child
      };
    } else {
      const res = deletePrefixIcon(child) || {
        parentDom: null,
        iconDom: null
      };
      if (res) return res;
    }
  }
};
function adjustIconPosition() {
  const el = proxy.$el;
  let { parentDom, iconDom } = deletePrefixIcon(el) || {};

  iconDom?.setAttribute('class', 'el-input__suffix is-date');
  iconDom?.childNodes[0]?.setAttribute('class', 'el-input__suffix-inner');
  parentDom?.appendChild(iconDom);
}
function handleEnter(event) {
  let val = datePickerValue.value;
  if (!val) return;
  const parentDom = event.currentTarget;
  const iconDom = parentDom?.getElementsByClassName('el-input__suffix is-date')[0];
  iconDom?.setAttribute('style', 'display:none');
}
function handleLeave(event) {
  const parentDom = event.currentTarget;
  const inputDom = parentDom?.getElementsByClassName('el-input__suffix is-date')[0];
  inputDom?.setAttribute('style', 'border-color: #C0C4CC');
}
</script>
